<template>
  <div class="user-container">
    <!-- <div> -->
      <!-- <van-tabbar v-model="active"> -->
        <!-- <van-tabbar-item>
              <template>
                <img :src="props.active ? icon.active : icon.inactive" alt="" />
              </template>
            </van-tabbar-item> -->
        <!-- <van-tabbar-item icon="wap-home-o" id="shouye">首页</van-tabbar-item> -->
        <!-- <van-tabbar-item icon="cart-o" id="shangcheng">商城</van-tabbar-item>
        <van-tabbar-item icon="manager-o" id="wode">我的</van-tabbar-item> -->
      <!-- </van-tabbar>
    </div> -->
    <!-- 用户基本信息面板 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="user-card">
        <!-- 用户头像、姓名 -->
        <van-cell fixed>
          <!-- 使用title来定义标题 -->
          <div class="left">
            <router-link to="/modify">
              <img class="avatar" src="../assets/images/tx.png" alt=""
            /></router-link>
            <span class="username" v-if="$store.state.isLogin">
              欢迎：{{$store.state.name}}
            </span>
            <span class="username" v-else
              ><router-link to="/login" style="color: #fff; font-size: 18px"
                >登录/注册</router-link
              ></span
            >
          </div>

          <div class="right">
            <router-link to="/message">
              <van-icon class="message" name="envelop-o" color="white" size="25PX" />
            </router-link>
            <router-link to="/set">
              <van-icon
                class="set"
                name="setting-o"
                color="white"
                size="25PX"
              />
            </router-link>
          </div>
        </van-cell>
      </div>
    </van-pull-refresh>

    <div class="nr">
      <van-tabs
        v-model="active1"
        color="#eee"
        background="#034FBE"
        title-inactive-color="#6895D8"
        title-active-color="#fff"
        line-width="10px"
        line-height="3px"
        duration:0.1.
      >
        <van-tab id="xingcheng"
          ><template #title> <van-icon name="send-gift-o" />全部</template>

          <div class="tabs1">
            <img src="../assets/images/pangxie.png" alt="" />
            <div>我们找不到你的票</div>
            <button @click="show()">购买门票</button>
          </div>
        </van-tab>
        <van-tab id="dingdan"
          ><template #title> <van-icon name="orders-o" />已付款</template>
          <div class="tabs1">
            <img src="../assets/images/pangxie.png" alt="" />
            <div>我们找不到你的票</div>
            <button @click="show()">购买门票</button>
          </div>
        </van-tab>
        <van-tab id="xingcheng"
          ><template #title> <van-icon name="send-gift-o" />未付款</template>

          <div class="tabs1">
            <img src="../assets/images/pangxie.png" alt="" />
            <div>我们找不到你的票</div>
            <button @click="show()">购买门票</button>
          </div>
        </van-tab>
        <van-tab id="xingcheng"
          ><template #title> <van-icon name="send-gift-o" />已取消</template>

          <div class="tabs1">
            <img src="../assets/images/pangxie.png" alt="" />
            <div>我们找不到你的票</div>
            <button @click="show()">购买门票</button>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      isLoading: false,
    //   active: "wode",
      active1: "xingcheng",
      active2: "1",
      showList: "",
    };
  },
  created(){

  },
  methods: {
    onRefresh() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      setTimeout(() => {
        this.$toast.success({
          message: "刷新成功",
          position: "top",
        });
        this.isLoading = false;
      }, 1000);
    },
    show() {
      this.$router.push("/buyticket");
    },
  },
};
</script>



<style lang="css" scoped>
body {
  margin: 0;

  height: 100%;
}

.user-container {
  margin: 0;
    width: 100%;
  height: 215vw;
  background-color: #f2f2f2;
  position: relative;
}
.user-container .van-cell {
  padding-top: 7vw;
  background-color: #034fbe;
  color: white;
}
.user-container .van-cell .left {
  position: absolute;
  /* height: 80px; */
}
.user-container .van-cell .left .avatar {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 3vw;
  vertical-align: middle;
}
.user-container .van-cell .left span {
  text-align: center;
  color: white;
  font-size: .8em;
  font-weight: 700;
}
.user-container .van-cell .right {
  height: 18vw;
}
.user-container .van-cell .right .message{
  position: absolute;
  left: 68vw;
  top: 4vw;
}
.user-container .van-cell .right .set {
position: absolute;
left: 82vw;
top: 4vw;
}
.user-container .tabs1 {
  text-align: center;
  position: absolute;
  top: 35vw;
  left: 28.3vw;
}
.user-container .tabs1 div {
  padding: 16px;
 
}
.user-container .tabs1 button {
  background-color: #007bff;
  color: #fff;
  border: 1px solid #007bff;
  padding: 15px 30px;
  border-radius: 20px;
  font-size: 1.2em;
}
</style>